<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="box-card mt-4">
    <el-button type="primary" @click="addCategories">添加分类</el-button>
    <x-table :columns="columns" :data="new_data" class="mt-4"></x-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginationObj.pageNum"
      background
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="paginationObj.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginationObj.total"
    >
    </el-pagination>
  </el-card>
  <el-dialog
    title="提示"
    v-model="dialogObj.dialogVisible"
    width="50%"
    >
    <el-form ref="form" :model="addCateForm" :rules="addCateFormRules">
      <el-form-item prop="cat_name" label="分类名称：">
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类：">
        <!-- options 用来指定数据源 -->
        <!-- props 用来指定配置对象 -->
        <el-cascader :options="parentCateObj.parentCateList" :props="parentCateObj.cascaderProps" v-model="parentCateObj.selectedKeys" @change="parentCateObj.parentCateChanged" clearable :style="{marginLeft: `${10}px`, width: `${98.5}%`}">
        </el-cascader>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogObj.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmitClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    title="修改分类"
    v-model="editDialogObj.editDialogVisible"
    width="50%"
  >
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-position="top">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogObj.editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogSubmitClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import { useStore } from '@/store'
import { columns } from './CategoriesDefaults'
import { paginationEvents, addCategoriesClickEvent, EditDialogEventsAndParams } from './CategoriesEvents'
import CategoriesInitFn from './CategoriesInit'
import XTable from './Categories-table/XTable.vue'
import mitt from 'mitt'

type Events = {
  'dialog-redact-click': number,
  'Delete-click': number
}
export const emitter = mitt<Events>()

const contentList: contentType[] = ['首页', '商品管理', '商品分类']

export default defineComponent({
  name: 'ProductCategories',
  components: {
    XTable,
    XBreadcrumb
  },
  setup () {
    const store = useStore()

    const new_data = ref<any>([])

    // 分页器
    const { handleSizeChange, handleCurrentChange, paginationObj } = paginationEvents()

    //初始化
    CategoriesInitFn(store, paginationObj, new_data)

    // 添加分类按钮相关事件与参数
    const { addCategories, dialogSubmitClick, parentCateObj, dialogObj, addCateForm, addCateFormRules } = addCategoriesClickEvent(store, paginationObj, new_data)

    // 编辑按钮对话框与Input相关参数与事件
    const { redactClick, editDialogSubmitClick, DeleteClick, editDialogObj, editForm, editFormRules } = EditDialogEventsAndParams(store, new_data, paginationObj)

    // 子组件编辑和删除按钮点击监听器
    emitter.on('dialog-redact-click', redactClick)
    emitter.on('Delete-click', DeleteClick)

    return { new_data, columns, handleSizeChange, handleCurrentChange, paginationObj, dialogObj, addCateForm, addCateFormRules, dialogSubmitClick, addCategories, parentCateObj, editDialogObj, editForm, editFormRules, editDialogSubmitClick, contentList }
  }
})
</script>
